// 能耗管理
<template>
  <div class="energy labBox">
    <laboratoryRightHeader
      :tabList="tabList"
      :commonIndex="commonIndex"
      @setTab="(event) => (commonIndex = event)"
    ></laboratoryRightHeader>
    <div class="table">
      <template v-if="commonIndex === 0">
        <laboratoryRightTableHeader
          :keys="'id'"
          :valueKey="'id'"
          :label="'name'"
          :uploadTrue="false"
          @outOptionValue="(event) => (formData.energyType = event)"
          :oneIndex="tableHeaderConfig.oneIndex"
          :nameArr="tableHeaderConfig.nameArr"
          :options="tableHeaderConfig.options"
          :optionsTitle="tableHeaderConfig.optionsTitle"
          :tableTimeValue="tableTimeValue"
          :type="'datetimerange'"
          @outValue="(event) => (tableTimeValue = event)"
          @outClick="(event) => (tableHeaderConfig.oneIndex = event)"
        ></laboratoryRightTableHeader>
        <div class="tableDetail flex-common">
          <div class="detailIntem mr-38 fs-14 cr-hui3">
            累计用水量
            <span
              class="familyD fs-18 cr-main ml-12 mr-6"
              style="color: #249ce9"
              >{{ formData.sumWaterUsage }}</span
            >
            <span class="cr-hui4 fs-12">m³</span>
          </div>
          <div class="detailIntem mr-38 cr-hui3">
            累计用电量
            <span
              class="familyD fs-18 cr-main ml-12 mr-6"
              style="color: #f1af24"
              >{{ (formData.sumEletricUsage).toFixed(2) }}</span
            >
            <span class="cr-hui4 fs-12">kw.h</span>
          </div>
        </div>
        <mergeTable
          :tableData="tableList"
          :tableConfig="config"
          v-if="tableHeaderConfig.oneIndex === 0"
        >
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column align="center" label="能耗类别" slot="energyType">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getEnergyType(row.energyType)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
        <div class="dataChartBox" v-if="tableHeaderConfig.oneIndex === 1">
          <template v-if="tableList.length > 0">
            <div
              class="chart"
              v-for="(option, index) in lineOptions"
              :key="index"
            >
              <charts :option="option" :changeWidth="changeWidth"></charts>
            </div>
          </template>
        </div>
      </template>
      <template v-if="commonIndex === 1">
        <laboratoryRightTableHeader
          :exportInterfaceName="'baseEquipmentExport'"
          :formData="'formData'"
          :tableTimeValue="tableTimeValue"
          :type="'datetimerange'"
          @outInputValue="(event) => (formData.energyType = event)"
          @outValue="(event) => (tableTimeValue = event)"
        ></laboratoryRightTableHeader>
        <mergeTable :tableData="device.table" :tableConfig="device.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column align="center" label="维护记录" slot="maintain">
            <template slot-scope="{ row }">
              <div
                class="fs-12 cr-main cursor flex-column"
                @click="maintainDialog(row)"
              >
                查看
                <div class="lookline"></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="处理状态"
            slot="equipmentStatus"
          >
            <template slot-scope="{ row }">
              <span
                class="fs-12"
                :style="{
                  color: tableCommonMethod.getOnlineColor(row.equipmentStatus),
                }"
                >{{
                  tableCommonMethod.getOnlineStatus(row.equipmentStatus)
                }}</span
              >
            </template>
          </el-table-column>
        </mergeTable>
      </template>
      <paging @onPage="onPage" @onNum="onNum" :total="total" />
      <!-- 维护记录弹窗 -->
      <tableDialog
        :dialogTableVisible="maintain.maintainTableDialog"
        :title="'维护记录'"
        :text="`累计维修次数：${formData.findCount}次`"
        :total="maintain.total"
        :type="'datetimerange'"
        :uploadTrue="false"
        :diaPageNum="formData.diaPageNum"
        :diaPageSize="formData.diaPageSize"
        :formData="'formData'"
        :eventName="'getdeviceInfo'"
        :tableTimeValue="diatableTimeValue"
        @outValue="(event) => (diatableTimeValue = event)"
        @outOptionValue="(event) => (formData.eventType = event)"
        @close="
          (event) => {
            maintain.maintainTableDialog = event;
          }
        "
      >
        <template #table>
          <mergeTable
            :tableData="maintain.table"
            :tableConfig="maintain.config"
          >
            <el-table-column
              slot="index"
              align="center"
              type="index"
              label="编号"
            ></el-table-column>
          </mergeTable>
        </template>
      </tableDialog>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
import laboratoryRightTableHeader from "../laboratoryRightTableHeader.vue";
import {
  laboratoryEnergyConfig,
  laboratoryEnergyDeviceConfig,
  laboratoryEnergyMaintainConfig,
} from "@/jsonData/table";
import {
  energyManage,
  deviceInfo,
  devicefindPage,
  equipmentMaintainfindCount,
} from "@/http/api";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
export default {
  name: "energy",
  components: {
    laboratoryRightTableHeader,
  },

  data() {
    return {
      commonIndex: 0,
      tableCommonMethod: tableCommonMethod,
      tableHeaderConfig: {
        optionValue: "",
        optionsTitle: "能耗类别",
        oneIndex: 0,
        nameArr: ["表格", "图表"],
        options: [
          {
            id: null,
            name: "全部",
          },
          {
            id: 1,
            name: "用水量",
          },
          {
            id: 2,
            name: "用电量",
          },
        ],
      },
      tabList: [
        {
          id: 0,
          name: "能耗监测",
        },
        {
          id: 1,
          name: "设备管理",
        },
      ],
      device: {
        table: [],
        config: laboratoryEnergyDeviceConfig,
        total: 0,
      },
      maintain: {
        maintainTableDialog: false,
        table: [],
        config: laboratoryEnergyMaintainConfig,
        total: 0,
      },
      tableList: [],
      config: laboratoryEnergyConfig,
      total: 0,
      lineOptions: {
        eletricUsage: {},
        waterUsage: {},
      },
      formData: {
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
        diaPageNum: 1,
        diaPageSize: 10,
        diapageSize: 10,
        diapageNum: 1,
        equipmentNo: "",
        laboratoryNo: "",
        equipmentType: 5,
        equipmentName: "",
        findCount: 0,
        user: "",
        sumWaterUsage: "",
        sumEletricUsage: "",
        energyType: null,
      },
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      diatableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
    };
  },
  mounted() {
    this.formData.startTime = this.$getTime(this.tableTimeValue[0]);
    this.formData.endTime = this.$getTime(this.tableTimeValue[1]);
    this.initenergyManage();
  },
  computed: {
    ...mapState({
      changeWidth: (state) => state.laboratory.changeWidth,
      facultyNo: (state) => state.laboratory.facultyNo,
      laboratoryNo: (state) => state.laboratory.laboratoryNo,
      collegeNo: (state) => state.laboratory.collegeNo,
    }),
  },
  methods: {
    // 能耗监测数据
    async initenergyManage() {
      let params = {
        laboratoryNo: this.laboratoryNo,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        energyType: this.formData.energyType,
      };
      let res = await energyManage(params);
      if (res.code === 20000 && res.data !== null) {
        this.formData.sumWaterUsage = res.data.sumWaterUsage;
        this.formData.sumEletricUsage = res.data.sumEletricUsage;
        this.tableList = res.data.pageResult.rows;
        this.total = res.data.pageResult.total;
      }
    },
    onPage(val) {
      this.formData.pageSize = val;
      this.getcommonIndexData(this.commonIndex);
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.getcommonIndexData(this.commonIndex);
    },
    exportExcel() {},
    // 设备信息
    async initdevicefindPage() {
      let params = {
        laboratoryNo: this.laboratoryNo,
        equipmentNo: this.formData.equipmentNo,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        equipmentType: this.formData.equipmentType,
        endTime: this.formData.endTime,
      };
      let res = await devicefindPage(params);
      if (res.code === 20000) {
        this.device.table = res.data.rows;
        this.device.total = res.data.total;
      }
    },
    getColor(index) {
      const color = {
        outlet1: "#00CCE4",
        outlet2: "#F1AA13",
      };
      return color[index];
    },
    /* TVOC 浓度系统图表 */
    configLineChart() {
      let num = -1;
      const yin = ["用水量", "用电量"];
      const unit = ["m³", "千瓦时"];
      for (let i in this.lineOptions) {
        num++;
        this.lineOptions[i] = {
          grid: {
            left: "2%",
            right: "4%",
            bottom: "10%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          title: {
            top: "20",
            left: "center",
            text: yin[num] + "变化趋势",
            textStyle: {
              color: "#5F717D",
              fontSize: 16,
            },
          },
          xAxis: {
            type: "category",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(74, 146, 255, .5)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#B5C4D0",
              },
              formatter: (value) => value.replace(/'-'/, "\n"),
              //X轴过长换行
            },
            data: Object.values(this.tableList).map((item) => item.monitorTime), //X轴
          },
          yAxis: {
            name: `单位：${unit[num]}`,
            nameTextStyle: {
              color: "#b2b2b2",
            },
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(74, 146, 255, 0.45)",
                type: "dashed",
                opacity: ".5",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#B5C4D0",
              },
            },
          },
          series: [
            {
              name: `${yin[num]} + "变化趋势`,
              type: "line",
              smooth: true,
              itemStyle: {
                color: this.getColor(i),
              },
              // areaStyle: {
              //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     {
              //       offset: 0,
              //       color: `rgba(${this.getColor(i)},0.35)`,
              //     },
              //     {
              //       offset: 1,
              //       color: `rgba(${this.getColor(i)},0)`,
              //     },
              //   ]),
              // },
              data: Object.values(this.tableList).map((item) => item[i]),
            },
          ],
        };
      }
    },
    // 维护记录
    maintainDialog(row) {
      this.resetdia();
      this.formData.type = "maintain";
      this.maintain.maintainTableDialog = true;
      this.formData.equipmentNo = row.equipmentNo;
      this.initfindCount();
      this.getdeviceInfo();
    },
    // 维护记录弹窗列表
    async getdeviceInfo() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        startTime: this.formData.diastartTime,
        endTime: this.formData.diaendTime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        user: this.formData.user,
      };
      let res = await deviceInfo(params);
      if (res.code === 20000) {
        this.maintain.table = res.data.rows;
        this.maintain.total = res.data.total;
      }
    },
    /* 设备不同状态对应的数量 */
    async initfindCount() {
      let params = {
        user: this.formData.user,
        equipmentNo: this.formData.equipmentNo,
      };
      let res = await equipmentMaintainfindCount(params);
      if (res.code === 20000) {
        this.formData.findCount = res.data;
      }
    },
    // 初始化时间和页码
    reset() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.pageNum = 1;
      this.formData.pageSize = 10;
      this.formData.startTime = this.$getTime(originTimeValue[0], true);
      this.formData.endTime = this.$getTime(originTimeValue[1], true);
      this.tableTimeValue = [this.formData.startTime, this.formData.endTime];
    },
    resetdia() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.diaPageNum = 1;
      this.formData.diaPageSize = 10;
      this.formData.diastartTime = this.$getTime(originTimeValue[0], true);
      this.formData.diaendTime = this.$getTime(originTimeValue[1], true);
      this.diatableTimeValue = [
        this.formData.diastartTime,
        this.formData.diaendTime,
      ];
    },
    getcommonIndexData(commonIndex) {
      this.tableHeaderConfig.oneIndex = 0;
      switch (commonIndex) {
        case 0:
          this.initenergyManage();
          break;
        case 1:
          this.initdevicefindPage();
          break;
      }
    },
  },
  watch: {
    tableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.getcommonIndexData(this.commonIndex);
      },
      deep: true,
    },
    diatableTimeValue: {
      handler(val) {
        this.formData.diastartTime = val[0];
        this.formData.diaendTime = val[1];
        this.getdeviceInfo();
      },
      deep: true,
    },
    "formData.energyType": {
      handler(val) {
        this.getcommonIndexData(this.commonIndex);
      },
      deep: true,
    },
    "tableHeaderConfig.oneIndex": {
      handler(val) {
        if (val === 0) {
          this.initenergyManage();
        } else {
          this.configLineChart();
        }
      },
      deep: true,
    },
    laboratoryNo(val) {
      this.getcommonIndexData(this.commonIndex);
    },
    commonIndex(index) {
      this.reset();
      this.getcommonIndexData(this.commonIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
.energy {
  .table {
    padding: 0px 24px;
    .tableDetail {
      margin-bottom: 20px;
    }
    .bottom-wrap {
      left: 48px !important;
      right: 48px !important;
      position: absolute;
      bottom: 20px;
    }
    .dataChartBox {
      display: flex;
      flex-flow: row wrap;
      /* justify-content: space-between; */
      justify-content: flex-start;
      width: 100%;
    }

    .dataChartBox .chart {
      position: relative;
      width: 48%;
      margin: 0 1%;
      height: 320px;
      min-height: 272px;
      background: #fff;
    }

    .dataChartBox .chart .openchart {
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 1;
    }

    .dataChartBox .chart .openchart i {
      font-size: 12px;
    }
  }
}
</style>
<style lang="scss">
.el-dialog.deviceDialog {
  height: 260px !important;
  .el-dialog__close {
    top: auto !important;
  }
  .el-date-editor .el-range__icon {
    line-height: 34px !important;
  }
  .el-dialog__body {
    background: none !important;
  }
  .el-range-separator {
    line-height: 30px !important;
  }
  .exportExcelButton {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      color: #00bfb1;
      line-height: 28px;
      cursor: pointer;
      width: 90px;
      height: 28px;
      border: 1px solid #00bfb1;
      border-radius: 2px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>